<template>
    <div>
      <header class="fix">
        <a href="javascript:history.go(-1);" class="returnBtn"></a>
        个人主页
      </header>
      <!--头部 结束-->
      <!--中间 开始-->
      <main>
        <div class="personalHome">
          <div class="personalInfo">
            <div class="personalHead"><img src="../../images/temporary/5.jpg"></div>
            <h2>环球小荐人</h2>
            <p>这个人太贪吃了，来不及写介绍</p>
            <div class="situation">
              <div class="situationNum">
                <span>3929</span>
                <em>被关注</em>
              </div>
              <div class="situationNum">
                <span>4078</span>
                <em>被赞</em>
              </div>
              <div class="situationNum">
                <span>392</span>
                <em>动态</em>
              </div>
            </div>
          </div>
          <div class="infoContent">
            <div class="infoHead">
              <div class="infoHeadLeft">
                <div class="headPic"><img src="../../images/temporary/7.jpg"></div>
                <div class="headName">
                  <p>环球小荐人</p>
                  <em>12小时前发布</em>
                </div>
              </div>
              <div class="follow">
                <a href="javascript:void(0);" class="infoHeadRight">...</a>
                <a href="javascript:void(0);" class="followBtn">+ 关注</a>
              </div>
            </div>
            <div class="infoText">
              <div class="textTitle">
                <em>置顶</em>
                <h3>法式轻奢ELLE箱包专场</h3>
              </div>
              <p>法式轻奢ELLE箱包专场，会员最高可省92.7元！霍思燕同款斜挎包会员价679.9元，牛皮百搭斜挎包会员价223.7元，U型开口斜挎包会员价298.5元，精致简约铆钉小方包会员价276元，快来进场为自己挑选一只心仪的包包吧~</p>
              <a href="#" class="lookFull">查看全文</a>
            </div>
            <!--缩略图-->
            <div id="" class="enlargementPic">
              <div class="contain">
                <div class="containContent">
                  <div class="text">
                    <div class="my-gallery" data-pswp-uid="2">
                      <figure>
                        <div><a ><img  src="../../images/temporary/5.jpg" preview="4"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img src="../../images/temporary/sb1.jpg" preview="4"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img src="../../images/temporary/s5.jpg" preview="4"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img  src="../../images/temporary/2.jpg" preview="4"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img src="../../images/temporary/sb3.jpg" preview="4"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img src="../../images/temporary/sb1.jpg" preview="4"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img  src="../../images/temporary/sb1.jpg" preview="4"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img src="../../images/temporary/sb1.jpg" preview="4"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img src="../../images/temporary/sb1.jpg" preview="4"></a></div>
                      </figure>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="secialField">
              <a href="#">
                <div class="secialPic"><img src="../../images/temporary/2.jpg"></div>
                <p>法式轻奢ELLE箱包专场</p>
              </a>
            </div>
            <div class="operation">
              <a href="#"><em class="fabulous"></em><span>6</span></a>
              <a href="#"><em class="share"></em><span>15</span></a>
            </div>
          </div>
          <div class="infoContent">
            <div class="infoHead">
              <div class="infoHeadLeft">
                <div class="headPic"><img src="../../images/temporary/7.jpg"></div>
                <div class="headName">
                  <p>环球小荐人</p>
                  <em>12小时前发布</em>
                </div>
              </div>
              <div class="follow">
                <a href="javascript:void(0);" class="infoHeadRight">...</a>
                <a href="javascript:void(0);" class="followBtn">+ 关注</a>
              </div>
            </div>
            <div class="infoText">
              <div class="textTitle">
                <em>置顶</em>
                <h3>法式轻奢ELLE箱包专场</h3>
              </div>
              <p>法式轻奢ELLE箱包专场，会员最高可省92.7元！霍思燕同款斜挎包会员价679.9元，牛皮百搭斜挎包会员价223.7元，U型开口斜挎包会员价298.5元，精致简约铆钉小方包会员价276元，快来进场为自己挑选一只心仪的包包吧~</p>
              <a href="#" class="lookFull">查看全文</a>
            </div>
            <!--缩略图-->
            <div id="_contain" class="enlargementPic">
              <div class="contain">
                <div class="containContent">
                  <div class="text">
                    <div class="my-gallery" data-pswp-uid="2">
                      <figure>
                        <div><a ><img  src="../../images/temporary/5.jpg" preview="3"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img src="../../images/temporary/sb1.jpg" preview="3"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img src="../../images/temporary/s5.jpg" preview="3"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img  src="../../images/temporary/2.jpg" preview="3"></a></div>
                      </figure>
                      <figure>
                        <div><a><img src="../../images/temporary/sb3.jpg" preview="3"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img src="../../images/temporary/sb1.jpg" preview="3"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img  src="../../images/temporary/sb1.jpg" preview="3"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img src="../../images/temporary/sb1.jpg" preview="3"></a></div>
                      </figure>
                      <figure>
                        <div><a ><img src="../../images/temporary/sb1.jpg" preview="3"></a></div>
                      </figure>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="secialField">
              <a href="#">
                <div class="secialPic"><img src="../../images/temporary/2.jpg"></div>
                <p>法式轻奢ELLE箱包专场</p>
              </a>
            </div>
            <div class="operation">
              <a href="#"><em class="fabulous"></em><span>6</span></a>
              <a href="#"><em class="share"></em><span>15</span></a>
            </div>
          </div>
          <a href="javascript:void(0);" class="followPeople">+ 关注</a>
        </div>
      </main>
      <!--中间 结束-->
      <!--缩略图点开大图 开始 -->
      <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>
        <div class="pswp__scroll-wrap">
          <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
          </div>
          <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
              <div class="pswp__counter"></div>
              <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
              <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
              <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
              <div class="pswp__preloader">
                <div class="pswp__preloader__icn">
                  <div class="pswp__preloader__cut">
                    <div class="pswp__preloader__donut"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
              <div class="pswp__share-tooltip"></div>
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
              <div class="pswp__caption__center"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import Vue from 'vue'
  import vuePhotoPreview from 'vue-photo-preview'
  import {TouchSlide} from '../../js/plugins/TouchSlide.1.1.min'
  import Swiper from 'swiper'
  //import '../../js/other/releaseDynamics.js'
  var options={
    fullscreenEl:false //关闭全屏按钮
  }
  Vue.use(vuePhotoPreview,options)
    export default {
        name: "personalHomePage",
      components:{
        TouchSlide,
        Swiper
      },
      methods:{
        /*查看收起*/
        lookcheckUp:function (){
    var content = $(".upText .firstText").html();
    var more = true;
    //限制字符个数
    var hide = function (){
      $(".upText .firstText").each(function(){
        var maxheight=120;
        if($(this).text().length>maxheight){
          $(this).text($(this).text().substring(0,maxheight));
          $(this).html($(this).html()+'...');
          more = true;
          $('.upBtn').html("查看更多");
        } else {
          $('.upBtn').hide();
        }
      });
    };
    hide();
    $('.upBtn').click(function(){
      if(more){
        $(".upText .firstText").html(content);
        $(this).html("收起");
        more = false;
      }else{
        hide();
      }
    });
  },
      },
      mounted:function() {
          this.lookcheckUp()
        setTimeout(() => {
          this.$previewRefresh()
        }, 2000);
      }
    }
</script>

<style scoped>
  @import "../../css/common/common.css";
  @import "../../css/plugins/swiper.min.css";
  @import "../../css/other/index.css";
  @import '../../../node_modules/vue-photo-preview/dist/skin.css';
</style>
